<<<<<<< HEAD
<!--
 * @Author: Xia_cc 978487464@qq.com
 * @Date: 2022-06-08 17:51:08
 * @LastEditors: Xia_cc 978487464@qq.com
 * @LastEditTime: 2022-06-10 14:23:21
 * @FilePath: \vue 小U到家\src\views\Mainshangping.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--  -->
<template>
  <el-container>
    <!-- 搜索框 -->
    <el-header>
      关键字:<el-input
        class="search"
        type="text"
        placeholder="请输入内容"
        v-model="text"
      ></el-input>
    </el-header>
    <!-- 弹出框 -->
    <el-dialog
      class="psyModle"
      title="添加商品分类"
      :visible.sync="shangPinAddVisible"
      width="37%"
      top="50px"
      center
    >
      <span class="psChaXunSpan">选择父级分类 </span
      ><el-select v-model="allzhandian" class="searchs" placeholder="请选择">
        <el-option
          v-for="item in allzhandianArr"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <span class="psChaXunSpan">输入分类名称 </span
      ><el-input class="searchs" type="text" placeholder="请输入品类名称" v-model="text"></el-input>
      <span class="psChaXunSpan">排序 </span
      ><el-input class="searchs" type="text" placeholder="请输入序号" v-model="text"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="shangPinAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="shangPinAddVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      class="psyModle"
      title="编辑商品分类"
      :visible.sync="shangPinVisible"
      width="37%"
      top="50px"
      center
    >
      <span class="psChaXunSpan">选择父级分类 </span
      ><el-select v-model="allzhandian" class="searchs" placeholder="请选择">
        <el-option
          v-for="item in allzhandianArr"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <span class="psChaXunSpan">输入分类名称 </span
      ><el-input class="searchs" type="text" placeholder="请输入品类名称" v-model="text"></el-input>
      <span class="psChaXunSpan">排序 </span
      ><el-input class="searchs" type="text" placeholder="请输入序号" v-model="text"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="shangPinVisible = false">取 消</el-button>
        <el-button type="primary" @click="shangPinVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 显示表 -->
    <el-main>
      <el-row>
        <el-button @click="shangPinAddVisible = true" type="primary" plain>添加</el-button>
        <el-button @click="updates()" type="danger" plain>批量删除</el-button>
      </el-row>
      <Maintable :tableData="shangpinArr">
        <template v-slot:tableline>
          <el-table-column prop="家具[0].goods_child_name" label="商品种类" width="240">
            <!-- <el-tree
              :props="props"
              :load="loadNode"
              lazy
              show-checkbox
              @check-change="handleCheckChange"
            >
            </el-tree> -->
          </el-table-column>
          <el-table-column prop="name" label="排序" width="240"> </el-table-column>
        </template>
        <template v-slot:chaozuo>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                plain
                icon="el-icon-edit"
                title="编辑"
                @click="
                  shangPinVisible = true;
                  chakan(scope.row.id);
                "
              ></el-button>
              <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                title="删除"
                @click="psyDelBut(scope.row.id)"
              ></el-button>
            </template>
          </el-table-column>
        </template>
      </Maintable>
    </el-main>
    <el-footer>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[6, 8, 10, 12]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-footer>
  </el-container>
</template>

<script>
import Maintable from "../components/main/Maintable";
export default {
  name: "Mainshangpin",
  components: {
    Maintable,
  },
  computed: {},
  data() {
    return {
      // props: {
      //   label: "name",
      //   children: "zones",
      // },
      // count: 1,
      text: "",
      size: 6,
      page: 1,
      total: 0,
      currentPage: 1,
      shangpinArr: [],
      shangPinVisible: false,
      shangPinAddVisible: false,
      allzhandianArr: JSON.parse(window.localStorage.getItem("allzhandianArr")),
      allzhandian: "",
      commodity_name: "",
      commodity_state: "",
      id: "",
    };
  },
  methods: {
    handleSizeChange(val) {
      this.size = val;
      console.log(`每页 ${val} 条`);
      this.selects();
    },
    handleCurrentChange(val) {
      this.page = val;
      console.log(`当前页: ${val}`);
      this.selects();
    },
    updates(id) {
      console.log(this.shangpinArr);
    },
    //查看
    chakan(commodity_name) {
      window.localStorage.setItem("commodity_name", commodity_name);
      this.shangpinArr.forEach((element) => {
        if (element.commodity_name == commodity_name) {
          this.commodity_name = element.commodity_name;
          this.commodity_state = element.commodity_state;
          this.id = element.id;
        }
      });
    },
    psyDelBut() {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    deletes(id) {
      console.log(id);
      // this.$axios({
      //   method: "post",
      //   url: "http://",
      //   data: { id },
      // }).then((data) => {
      //   // arr=data.toArray;
      // });
    },
    //获取页面数据
    selects() {
      // console.log(this.text);
      this.$axios({
        method: "post",
        url: "/xiaoucomeshome_war/admin/selectGoodsByName",
        data: {
          goods_child_name: this.text,
          page: this.page,
          size: this.size,
          // goods_child_id
          // goods_child_sort
          // goods_id: this
          // goods_child_state: this.peiSongYuanZhuangTai,
        },
      })
        .then((response) => {
          this.total = response.data.total;
          this.shangpinArr.push(response.data.data);
          // console.log(response.data);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // handleCheckChange(data, checked, indeterminate) {
    //   console.log(data, checked, indeterminate);
    // },
    // handleNodeClick(data) {
    //   console.log(data);
    // },
    // loadNode(node, resolve) {
    //   if (node.level === 0) {
    //     return resolve([{ name: "家具" }, { name: "region2" }]);
    //   }
    //   // if (node.level > 3) return resolve([]);

    //   var hasChild;
    //   if (node.data.name === "region1") {
    //     hasChild = true;
    //   } else if (node.data.name === "region2") {
    //     hasChild = false;
    //   } else {
    //     hasChild = Math.random() > 0.5;
    //   }

    //   setTimeout(() => {
    //     var data;
    //     if (hasChild) {
    //       data = [
    //         {
    //           name: "zone" + this.count++,
    //         },
    //         {
    //           name: "zone" + this.count++,
    //         },
    //       ];
    //     } else {
    //       data = [];
    //     }

    //     resolve(data);
    //   }, 500);
    // },
  },
  mounted() {
    this.selects();
    this.allzhandianArr = window.localStorage.getItem("allzhandian");
  },
};
</script>

<style lang="less" scoped>
.search {
  margin: 10px 40px 0 20px;
  width: 20%;
}
.block {
  margin: 0 130px;
  float: right;
}
.psChaXunSpan {
  width: 20%;
  display: inline-block;
  margin: 5px 2%;
  text-align-last: justify;
}
.searchs {
  margin: 5px 2%;
  width: 72%;
}
</style>
=======
<!--
 * @Author: Xia_cc 978487464@qq.com
 * @Date: 2022-06-08 17:51:08
 * @LastEditors: Xia_cc 978487464@qq.com
 * @LastEditTime: 2022-06-10 14:23:21
 * @FilePath: \vue 小U到家\src\views\Mainshangping.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--  -->
<template>
  <el-container>
    <!-- 搜索框 -->
    <el-header>
      关键字:<el-input
        class="search"
        type="text"
        placeholder="请输入内容"
        v-model="text"
      ></el-input>
    </el-header>
    <!-- 弹出框 -->
    <el-dialog
      class="psyModle"
      title="添加商品分类"
      :visible.sync="shangPinAddVisible"
      width="37%"
      top="50px"
      center
    >
      <span class="psChaXunSpan">选择父级分类 </span
      ><el-select v-model="allzhandian" class="searchs" placeholder="请选择">
        <el-option
          v-for="item in allzhandianArr"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <span class="psChaXunSpan">输入分类名称 </span
      ><el-input class="searchs" type="text" placeholder="请输入品类名称" v-model="text"></el-input>
      <span class="psChaXunSpan">排序 </span
      ><el-input class="searchs" type="text" placeholder="请输入序号" v-model="text"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="shangPinAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="shangPinAddVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      class="psyModle"
      title="编辑商品分类"
      :visible.sync="shangPinVisible"
      width="37%"
      top="50px"
      center
    >
      <span class="psChaXunSpan">选择父级分类 </span
      ><el-select v-model="allzhandian" class="searchs" placeholder="请选择">
        <el-option
          v-for="item in allzhandianArr"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <span class="psChaXunSpan">输入分类名称 </span
      ><el-input class="searchs" type="text" placeholder="请输入品类名称" v-model="text"></el-input>
      <span class="psChaXunSpan">排序 </span
      ><el-input class="searchs" type="text" placeholder="请输入序号" v-model="text"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="shangPinVisible = false">取 消</el-button>
        <el-button type="primary" @click="shangPinVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 显示表 -->
    <el-main>
      <el-row>
        <el-button @click="shangPinAddVisible = true" type="primary" plain>添加</el-button>
        <el-button @click="updates()" type="danger" plain>批量删除</el-button>
      </el-row>
      <Maintable :tableData="shangpinArr">
        <template v-slot:tableline>
          <el-table-column prop="家具[0].goods_child_name" label="商品种类" width="240">
            <!-- <el-tree
              :props="props"
              :load="loadNode"
              lazy
              show-checkbox
              @check-change="handleCheckChange"
            >
            </el-tree> -->
          </el-table-column>
          <el-table-column prop="name" label="排序" width="240"> </el-table-column>
        </template>
        <template v-slot:chaozuo>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                plain
                icon="el-icon-edit"
                title="编辑"
                @click="
                  shangPinVisible = true;
                  chakan(scope.row.id);
                "
              ></el-button>
              <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                title="删除"
                @click="psyDelBut(scope.row.id)"
              ></el-button>
            </template>
          </el-table-column>
        </template>
      </Maintable>
    </el-main>
  </el-container>
</template>

<script>
import Maintable from "../components/main/Maintable";
export default {
  name: "Mainshangpin",
  components: {
    Maintable,
  },
  computed: {},
  data() {
    return {
      // props: {
      //   label: "name",
      //   children: "zones",
      // },
      // count: 1,
      text: "",
      shangpinArr: [],
      shangPinVisible: false,
      shangPinAddVisible: false,
      allzhandianArr: [],
      allzhandian: "",
      commodity_name: "",
      commodity_state: "",
      id: "",
    };
  },
  methods: {
    updates(id) {
      console.log(this.shangpinArr);
    },
    //查看
    chakan(commodity_name) {
      window.localStorage.setItem("commodity_name", commodity_name);
      this.shangpinArr.forEach((element) => {
        if (element.commodity_name == commodity_name) {
          this.commodity_name = element.commodity_name;
          this.commodity_state = element.commodity_state;
          this.id = element.id;
        }
      });
    },
    psyDelBut() {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    deletes(id) {
      console.log(id);
      // this.$axios({
      //   method: "post",
      //   url: "http://",
      //   data: { id },
      // }).then((data) => {
      //   // arr=data.toArray;
      // });
    },
    //获取页面数据
    selects() {
      // console.log(this.text);
      this.$axios({
        method: "post",
        url: "/xiaoucomeshome_war/admin/selectGoodsByName",
        data: {
          goods_child_name: this.text,
          page: 1,
          size: 8,
          // goods_child_id
          // goods_child_sort
          // goods_id: this
          // goods_child_state: this.peiSongYuanZhuangTai,
        },
      })
        .then((response) => {
          this.shangpinArr.push(response.data.data);
          // console.log(response.data);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // handleCheckChange(data, checked, indeterminate) {
    //   console.log(data, checked, indeterminate);
    // },
    // handleNodeClick(data) {
    //   console.log(data);
    // },
    // loadNode(node, resolve) {
    //   if (node.level === 0) {
    //     return resolve([{ name: "家具" }, { name: "region2" }]);
    //   }
    //   // if (node.level > 3) return resolve([]);

    //   var hasChild;
    //   if (node.data.name === "region1") {
    //     hasChild = true;
    //   } else if (node.data.name === "region2") {
    //     hasChild = false;
    //   } else {
    //     hasChild = Math.random() > 0.5;
    //   }

    //   setTimeout(() => {
    //     var data;
    //     if (hasChild) {
    //       data = [
    //         {
    //           name: "zone" + this.count++,
    //         },
    //         {
    //           name: "zone" + this.count++,
    //         },
    //       ];
    //     } else {
    //       data = [];
    //     }

    //     resolve(data);
    //   }, 500);
    // },
  },
  mounted() {
    this.selects();
    this.allzhandianArr = window.localStorage.getItem("allzhandian");
  },
};
</script>

<style lang="less" scoped>
.search {
  margin: 10px 40px 0 20px;
  width: 20%;
}
.psChaXunSpan {
  width: 20%;
  display: inline-block;
  margin: 5px 2%;
  text-align-last: justify;
}
.searchs {
  margin: 5px 2%;
  width: 72%;
}
</style>
>>>>>>> ae27e4fe2d4f939d0b0ee2bfa506b9e3269c53cb
